{% extends "Base.html" %}
{% load static %}
{% block pagetitle %} 用户主页{% endblock %}
{% block content %}
    <div class="container-fluid">

        <div class="row">
            <!--第一栏-->
            <div class="col-md-5">
                <div id ="img_new" style="margin-right:auto;margin-left:auto;margin-top:20%;background-image:url({{ userimg }});background-repeat: no-repeat;background-position:center center;background-size: cover;width:40%;height:50%;"></div>
{#                <img id = "img_new" style="margin-left: 30%;margin-top: 20%;" src="{{ userimg }}" alt="用户头像显示错误"width="40%;" height="50%">#}
                <div class="" style="margin-left: 43%;margin-top: 2%;">
                    <input type="file" name="usernimg" id="usernimg" accept="image/gif,image/png,image/jpg,image/jpeg" style="width: 0;height: 0"onchange="showimg(this)"><br>
{#                    οnchange="loadFile(this.files[0])"#}
                    <!--默认的HTML文件上传控件，onchange属性调用JavaScript读取上传的文件名，修改第二个标签的显示内容，同时设置该上传控件长宽为0不显示，不占用页面控件，或者设置hidden，但是会占用一点空间-->
                    <label class="btn btn-info" for="usernimg">上传文件</label>
                    <!--利用标签的for属性实现点击标签触发文件上传，同时设计成按钮样式-->
{#                    <label id="filePos">未上传</label><!--定义一个显示文件名的标签-->#}
                </div>
                <label style="margin-left: 43%;">图片限制3M</label>
            </div>
            <!--第二栏-->
            <div class="col-md-7">
                <div class="" style="margin-top: 13%;">
                    <div class="input-group mb-3" style="width: 55%;">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="inputGroup-sizing-default">用户名</span>
                        </div>
                        <input id="uninput" type="text" class="form-control" aria-label="Default" value="{{ username }}" aria-describedby="inputGroup-sizing-default" width="20%" disabled>
                        <button class="hbtn" onclick="Changein(uninput)" style=" margin-left: 5%;background-color: #d8e3e7;border: none;">修改</button>
                    </div>
                    <div class="input-group mb-3" style="width: 55%;">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="inputGroup-sizing-default">手机号</span>
                        </div>
                        <input type="text" id="teinput" class="form-control"value="{{ telnumber }}" aria-label="Default" aria-describedby="inputGroup-sizing-default" disabled>
                        <button class="hbtn" onclick="Changein(teinput)" style=" margin-left: 5%;background-color: #d8e3e7;border: none;">修改</button>
                    </div>
                    <div class="input-group mb-3" style="width: 55%;">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="inputGroup-sizing-default">邮箱号</span>
                        </div>
                        <input type="text" id="eminput" class="form-control" value="{{ email }}" aria-label="Default" aria-describedby="inputGroup-sizing-default" disabled>
                        <button class="hbtn" onclick="Changein(eminput)" style=" margin-left: 5%;background-color: #d8e3e7;border: none;">修改</button>
                    </div>
                    <div class="input-group mb-3" style="width: 55%;">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="inputGroup-sizing-default">微信号</span>
                        </div>
                        <input type="text" id="wcinput"  class="form-control" value="{{ wechat }}" aria-label="Default" aria-describedby="inputGroup-sizing-default" disabled>
                        <button class="htn" onclick="Changein(wcinput)" style=" margin-left: 5%;background-color: #d8e3e7;border: none;">修改</button>
                    </div>
                    <div class="input-group mb-3 "style="width: 55%;">
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#repasstag" style="width: 100%;">
                            密码修改
                        </button>

                        </div>
                    </div>
                    <div style="margin-left: 80%;margin-top: 10%;">
                        <button class="btn btn-primary" onclick="modifymsg()" type="button">
                            保存
                        </button>
                    </div>
                </div>

                <!--密码修改模态框-->
            <div class="modal fade" id="repasstag" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">密码修改</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <form id = "repassform">
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text" id="basic-addon1">旧密码</span>
                                    </div>
                                    <input type="password" name="re_oldpassword" class="form-control" placeholder="请输入旧密码" aria-label="Username" aria-describedby="basic-addon1">
                                </div>
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text" id="basic-addon1">新密码</span>
                                    </div>
                                    <input type="password" name="re_newpassword" class="form-control" placeholder="请输入新密码" aria-label="Username" aria-describedby="basic-addon1">
                                </div>
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text" id="basic-addon1">确认密码</span>
                                    </div>
                                    <input type="password" name="re_secpassword" class="form-control" placeholder="请再次输入密码" aria-label="Username" aria-describedby="basic-addon1">
                                </div>
                            </form>
                            <!--提示信息-->
                            <div id = "msg_box" style="color: red">
                            提示信息
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-primary" onclick="repassword()">保存</button>
                        </div>
                    </div>
                </div>
            </div>



            </div>
        </div>
    </div>


{% endblock %}